import React, { useEffect, useState } from 'react'

export default function App() {
  //利用useState给函数式组件添加状态
  let [opacity,setOpacity] = useState(1)

  //useEffect参数2为空,只会在挂载完成(初始化)时加载一次
  useEffect(()=>{

    const opacityTimer = setInterval(()=>{
      opacity -= 0.1
      if(opacity <= 0) {
        opacity = 1
      }
      //将变化过后的值重新赋值给opacity
      setOpacity(opacity)
    },100)
    
    //参数1的回调函数返回的函数,可以在此函数中做一些逻辑处理,比如清除定时器
    return () => {
      clearInterval(opacityTimer)
    }
  },[])

  //使用opacity+定时器设置文字深浅色渐变,style要求一个对象格式的数据,数据是js代码,需要js环境,所以是双层{{}}
  return (
    <div>
      <h1 style={{opacity}}>ReactHook 牛逼</h1>
    </div>
  )
  
}
